<template>
  <template v-for="item in state.questionList" :key="item.id">
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <span>题型：{{item.type}}</span>
                <span>难度：{{ item.difficulty_level }}</span>
                <span>创建者：{{ item.owner_name }}</span>
                <span>日期：{{ onlyDate(item.add_time ) }}</span>
                <span>来源：{{ item.reference }}</span>
                <el-button type="primary" :icon="Plus" >加入</el-button>
            </div>        
      </template>
      <div class="card-body">       
          <div v-html="item.content" class="line-break"></div>        
      </div>
    </el-card>
  </template>
  <el-pagination
      background
      layout="prev, pager, next"
      :total="state.total"
      :page-size="state.pageSize"
      :current-page="state.currentPage"
      @current-change="changePage"
    />
</template>

<script setup>
import { reactive, onMounted } from 'vue'
import {Plus} from '@element-plus/icons-vue'
import axios from '@/utils/axios'
const state = reactive({
  loading: false, // 列表数据接口返回前的 loading
  questionList: [], // 数据列表
  total: 1, // 总条数
  currentPage: 1, // 当前页
  pageSize: 10 // 分页大小
})
onMounted(()=>{
    getQuestions()
})
const getQuestions = () => {
  state.loading = true
  axios.get('/questions',{params:{page:state.currentPage}}).then(res => {
    if (res.code==200){
      state.questionList = res.data.results
      state.loading = false
      state.total=res.data.count        
    }else{
      console.log("error", res.message)
    }        
  })
  .catch((error)=>{
    console.log("error")
  })   

}
//页码变化是，重新获取数据
const changePage = (val)=>{
    state.currentPage = val
    getQuestions()
}
//截取时间中的日期
const onlyDate = (datastr)=>{
    return datastr.slice(0,10)
}
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  margin: 0;
  padding: 0;
  height: 10px;
}
.card-body {
    display: block;
    margin: 0px;
    padding: 0px;
}
.text {
  font-size: 10px;
}
.item {
  margin-bottom: 18px;
}
.box-card {
  height:auto;
  overflow-y: auto;
}
.line-break{
white-space: pre-wrap;
}
img{
    display:block;
}
</style>